<template>
  <div class="monitoring">
    <!-- 左侧选择设备 -->
    <!-- <div class="left-container">
      <h3>选择设备：</h3>
      <a-checkbox-group v-model="resultArr" @change="onChange">
        <a-row>
          <a-col :span="24" v-for="item in checkedArr" :key="item.id">
            <a-checkbox :disabled="item.checked" :value="item.id">
              星链设备{{ item.id }}
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </div> -->
    <!-- 右边展示视频流 -->
    <div class="right-container">
      <a-row :gutter="[16, 16]">
        <a-col
          :span="24"
          v-for="(item, index) in modelObjectList"
          :key="item.cameraId"
        >
          <div class="monitoring-item">
            <h2>星链设备{{ index + 1 }}</h2>
            <div class="box-2">
              <video-box :videoIndex="index" :modelObject="item"></video-box>
            </div>
          </div>
        </a-col>
        <!-- <a-col :span="24">
          <div class="monitoring-item">
            <h2>星链设备1</h2>
            <div class="box-2">
              <img
                class="video-img"
                src="../../assets/img/video-img.png"
                alt=""
              />
            </div>
          </div>
        </a-col> -->
      </a-row>
    </div>
  </div>
</template>

<script>
import videoBox from '../../components/video.vue';
export default {
  props: {},
  components: {
    videoBox,
  },
  data() {
    return {
      modelObjectList: [
        {
          camera_region: '候车区',
          cameraId: 'ID:11002',
          url: 'http://172.52.24.48:8080/live/tslc.flv',
        },
        // {
        //   camera_region: '购票区',
        //   cameraId: 'ID:11003',
        //   url:
        //     'https://172.51.215.158:30082/live/34020000001320000026@34020000001320000001.flv',
        // },
        // {
        //   camera_region: '站台',
        //   cameraId: 'ID:11004',
        //   url:
        //     'https://172.51.215.158:30082/live/34020000001320000027@34020000001320000001.flv',
        // },
        // {
        //   camera_region: '站台',
        //   cameraId: 'ID:11004',
        //   url:
        //     'https://172.51.215.158:30082/live/34020000001320000085@34020000001320000001.flv',
        // },
      ],
      checkedArr: [
        { id: 1, checked: false },
        { id: 2, checked: false },
        { id: 3, checked: false },
        { id: 4, checked: false },
        { id: 5, checked: false },
        { id: 6, checked: false },
      ],
      resultArr: [],
    };
  },

  computed: {},
  created() {},
  mounted() {},
  methods: {
    onChange(e) {
      console.log(e);
      // 最多显示四路视频流
      if (this.resultArr.length > 4) {
        this.resultArr.pop();
        this.$message.error('最多选择四路视频');
      }
      console.log(this.resultArr);
      // 切换视频流
    },
  },
};
</script>

<style scoped lang="less">
.monitoring {
  .left-container {
    width: 200px;
    display: inline-block;
    background: #fff;
    vertical-align: top;
    margin-right: 20px;
    padding: 16px;
    box-sizing: border-box;
    .ant-col {
      padding-top: 10px;
    }
  }
  .right-container {
    width: calc(100%);
    display: inline-block;
    // background: #fff;
    vertical-align: top;
    // padding: 16px;
    box-sizing: border-box;
  }
  .monitoring-item {
    width: 100%;
    border: 1px solid #f0f0f0;
    background: #fff;
    h2 {
      line-height: 36px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 14px;
      font-weight: normal;
      padding: 0 16px;
      margin: 0;
    }
    .box {
      background: #fafafa;
      height: 400px;
    }
    .box-2 {
      background: #fafafa;
      height: 800px;
    }
    .video-img {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      box-sizing: border-box;
      margin: 20px;
    }
  }
}
</style>
